<template>
    <div class="containe"> 
        <h3>姓名：{{name}}</h3>
        <h3>年龄：{{age}}</h3>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看电话</button>
    </div>
</template> 

<script lang="ts"> 

export default { 
    name: "DemoComponent",
    data(){ 
        return { 
            name: "张三",
            age: 18,
            tel:  "12345678901"
          
        }
    },
    methods: { 
        showTel() {
            alert(this.tel)
        },

        changeName() {
            this.name = "张三丰"
        },
        changeAge() {
            this.age +=1
        }
    },

}   
</script >
<style scoped>
.containe {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 10px;
    width: 300px;
    margin: 10px;
}
button  { 
    margin: 0 0 5px;
} 
</style>